<template>
  <div class="layout-padding">
    <splitpanes horizontal>
      <pane size="50">
        <div class="layout-padding-auto layout-padding-view">
          <!--查询表单-->
          <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
            <el-form-item :label="$t('qms.detectionTime')">
              <el-date-picker style="width: 300px"
                              v-model="state.queryForm.checkTime"
                              type="daterange"
                              @change="changeCheckTime"
                              range-separator="To"
                              value-format="YYYY-MM-DD HH:mm:ss"
                              :start-placeholder="$t('iot.startTime')"
                              :end-placeholder="$t('iot.endTime')"/>
            </el-form-item>

            <el-form-item :label="$t('iot.processCode')">
              <el-select :placeholder="$t('iot.processCode')"
                         style="width: 150px"
                         filterable
                         remote
                         @change="changeProcessList"
                         :remote-method="getProcessList"
                         v-model="state.queryForm.processCode">
                <el-option v-for="item in processList"
                           :key="item.processCode"
                           :label="item.processCode"
                           :value="item">
                  <span style="float: left">{{ item.processCode }}</span>
                  <span style=" float: right;  color: var(--el-text-color-secondary);  font-size: 13px; "> {{
                      item.processName
                    }} </span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('iot.productionLineCode')">
              <el-select :placeholder="$t('iot.productionLineCode')"
                         style="width: 150px"
                         filterable
                         remote
                         :remote-method="getLineList"
                         v-model="state.queryForm.productionLineCode">
                <el-option v-for="item in lineList"
                           :key="item.productionLineCode"
                           :label="item.productionLineCode"
                           :value="item.productionLineCode">
                  <span style="float: left">{{ item.productionLineCode }}</span>
                  <span style=" float: right;  color: var(--el-text-color-secondary);  font-size: 13px; "> {{
                      item.productionLineName
                    }} </span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="search" type="primary"   @click="getDataList">{{$t('btn.search')}}</el-button>
              <el-button icon="refresh"  @click="resetQuery">{{$t('btn.reset')}}</el-button>
            </el-form-item>
          </el-form>
          <!--查询结果的列表-->
          <el-table :data="state.dataList" highlight-current-row
                    v-loading="state.loading" border style="width: 100%;height: 100%"
                    :cell-style="tableStyle.cellStyle" stripe :header-cell-style="tableStyle.headerCellStyle"
                    @row-click="clickRow"
                    @selection-change="selectionChangeHandle">
            <el-table-column prop="productionLineCode" width="120" :label="$t('iot.productionLineCode')"/>
            <el-table-column prop="processName" width="120" :label="$t('iot.processName')"/>
            <el-table-column prop="checkType" width="150" :label="$t('qms.detectionClassCode')"/>
            <el-table-column prop="pqcCount" width="120" :label="$t('qms.numberOfInspection')"/>
            <el-table-column prop="shiftCode" width="150" :label="$t('qms.shiftCode')">
              <template #default="scope">
                <!--根据不同的状态选择不同的颜色的tag-->
                <el-tag effect="plain" :type="scope.row.shiftCode === 'MorningShift' ? 'primary' : 'warning'">
                  {{ scope.row.shiftCode }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="checkDate" width="150" :label="$t('qms.detectionTime')"/>
            <el-table-column prop="destroyStatus" width="150" :label="$t('qms.destroyTestResult')">
              <template #default="scope">
                <el-tag effect="plain" :type="getTagAttr(scope.row.destroyStatus).type" >
                  {{ scope.row.destroyStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="starCheckTime" width="180" :label="$t('qms.breakTheStartInspectionTime')"/>
            <el-table-column prop="endCheckTime" width="180" :label="$t('qms.breakTheEndCheckTime')"/>
            <el-table-column prop="noDestroyStatus" width="150" :label="$t('qms.non-destructiveTestResults')">
              <template #default="scope">
                <el-tag effect="plain" :type="getTagAttr(scope.row.noDestroyStatus).type" >
                  {{ scope.row.noDestroyStatus }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="fphStarCheckTime" width="180" :label="$t('qms.non-destructiveStartInspectionTime')"/>
            <el-table-column prop="fphEndCheckTime" width="180" :label="$t('qms.non-destructiveEndOfInspectionTime')"/>

          </el-table>
          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination"/>
        </div>
      </pane>
      <pane size="50">
        <div class="layout-padding-auto layout-padding-view">
          <el-tabs model-value="first">
            <el-tab-pane name="first">
              <template #label>
                <el-icon>
                  <calendar/>
                </el-icon>
                <span class="ml-0.5"> {{$t('qms.detail')}} </span>
              </template>
            </el-tab-pane>
          </el-tabs>
          <detial ref="locationRef"/>
        </div>
      </pane>
    </splitpanes>
  </div>

</template>

<script setup lang="ts">

import {BasicTableProps, useTable} from "/@/hooks/table";
import detial from "./detial.vue";
import {getPqcPageSet} from "/@/api/platform/qms/qmsCheckReport";
import {mesProcessLine, mesProcessPage} from "/@/api/platform/qms/qmsRelationH";

// 搜索变量
const queryRef = ref()
const locationRef = ref()
const processList = ref()
const lineList = ref()

const formatDate = (date: Date): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 仓库表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getPqcPageSet
})

const getProcessList = (query: any) => {
  mesProcessPage({
    "queryWord": query
  }).then((res: any) => {
    if (res.code == 0) {
      processList.value = res.data.records
    }
  })
}

const changeProcessList = (e) => {
  state.queryForm.processCode = e.processCode
  state.queryForm.processName = e.processName
  state.queryForm.processId = e.id
  mesProcessLine({
    "id": e.id
  }).then((res: any) => {
    if (res.code == 0) {
      lineList.value = res.data
    }
  })
}

const statusColorMap = new Map([
  ['pass', { type: 'primary', effect: 'plain' }],
  ['waitCheck', { type: 'info', effect: 'plain' }],
  ['fail', { type: 'warning', effect: 'plain' }],
]);
// 通过状态获取tag标签的属性
const getTagAttr = (status) => {
  if(!status){
    return { type: 'warning', effect: 'plain' }
  }
  return statusColorMap.get(status);
};


//  table hook
const {
  tableStyle,
  getDataList,
  sizeChangeHandle,
  currentChangeHandle
} = useTable(state)

// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)

// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};

//时间点击
const changeCheckTime = (data) => {
  state.queryForm.checkStartTime = data[0]
  state.queryForm.checkEndTime = data[1]
}


// 点击行的时候触发
const clickRow = (row: any) => {
  locationRef.value.query(row)
}

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  // state.queryForm = {"checkStartTime":formatDate(new Date()),"checkEndTime":formatDate(new Date())}
  state.queryForm = {}
  // 清空多选
  selectObjs.value = []
  getDataList(false)

}
</script>
